   /*验证：外部样式表是否关联成功*/
   /*背景效果*/
body{
   /*背景属性【复合属性】
   实现效果：引入背景图【移动位置】
   */
   background: url(../img/bj1.jpg) no-repeat;
   background: url(../img/bj2.jpg);
   
   /*背景尺寸属性：属性值:宽与高*/
   background-size: 100% 120%;
}
/*2.哆啦A梦*/
#cat{
    width:250px;
    height:250px;
    border:1px solid red;
    background:url(../img/cat_1.png);
    /*定位*/
    position:relative;
    left: -45px;
    top: 75px;
    /*添加关键帧*/
    /*动画属性：关键帧名称 过渡时间  流畅度 无限次*/
    animation: cat 10s linear infinite;
}
/*美化 标题字：华文彩云*/
h1{
    /*font字体【复合】属性*/
    font-family: "华文彩云";
    font-size: 50px;
}
/*云 被 哆啦A梦 压到下面 选中  img加外边距*/
img{
  margin-top: -100px;
}

/*手翻书  关键帧【最后样式块，统一管理】*/
/*关键帧 提供功能：继承
  继承：在元素上添加关键帧
  默认继承元素上的所有样式【边框，高度，定位...】
  背景尺寸无法继承
*/
@keyframes cat{
  0%{
    /* 起始帧 动画哆啦A梦位置不能改变 */
    left: -45px;
    top: 75px;
  }
  10%{ 
    /* 哆啦A梦  向右  */
    background: url(../img/cat_1.png);
    background-size: 100% 100%;
    left: 600px;
    transform: scale(1)rotate(0deg);
  }
  20%{
    background: url(../img/cat_2.png);
    background-size: 100% 100%;
    top: 500px;
    transform: scale(1) rotate(0deg);
  }
  30%{
    background: url(../img/cat_3.png);
    background-size: 100% 100%;
    left: -45px;
    right:45px;
    top: 85px;
    transform: scale(2)rotate(360deg);
    /*缩放 旋转  问题：继承
    所有百分比
    */
  }
  40%{
    background: url(../img/cat_4.png);
    background-size: 100% 100%;
    left: -55px;
    right:55px;
    top: 75px;
    transform: scale(1)rotate(0deg);
  }  
  50%{ 
    background: url(../img/cat_5.png);
    background-size: 100% 100%;
    left: -45px;
    right:45px;
    top: 65px;
    transform: scale()rotate(0deg);
  }
  60% {
    background: url(../img/cat_6.png);
    background-size: 100% 100%;
    left: -45px;
    right:45px;
    top: 55px;
    transform: scale(1)rotate(0deg);
  }



}